<template>
  <div class="app-container.home" >
    <el-row :gutter="0">
      <el-col :span="17">
          <!-- 第一列，放置折线图 -->
          <div ref="lineChart" style="width:110%; height: 400px;"></div>
      </el-col>
      <el-col :span="7">
           <!--第二列，放置饼图-->
          <div ref="pieChart" style="width:100%; height: 400px;"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :sm="24" :lg="24" style="padding-left: 50px">
        <!-- 柱状图容器 -->
        <div ref="barChart" style="width: 100%; height: 400px; margin-top: 20px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";
import { getToken } from '@/utils/auth'
// import {fontSize} from '@/api/CheryView/CheryView'

export default {
  name: 'Home',
  data() {
    return {
      // 初始化图表引用
      lineChart: null,
      pieChart: null,
      barChart: null,
      // 用于存储从后端获取的数据
      lineChartData: [],
      pieChartData: [],
      barChartData: [],
    };
  },
  mounted() {
    this.fetchDate();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },

  methods: {
    async fetchDate() {
      const lineResponse=await axios.get('/dev-api/CheryView/View/line-chart-data',{
        headers: {
          // 将 token 添加到请求头中，通常是 'Authorization' 头
          'Authorization': `Bearer ${getToken()}`
        }
      });

      const pieResponse=await axios.get('/dev-api/CheryView/View/pie-chart-data',{
        headers: {
          // 将 token 添加到请求头中，通常是 'Authorization' 头
          'Authorization': `Bearer ${getToken()}`
        }
      });
       const barResponse=await axios.get('/dev-api/CheryView/View/bar-chart-data',{
         headers: {
           // 将 token 添加到请求头中，通常是 'Authorization' 头
           'Authorization': `Bearer ${getToken()}`
         }
       });

      this.lineChartData = lineResponse.data.data; // 假设返回的数据是数组
      this.pieChartData = pieResponse.data.data; // 假设返回的数据是数组
      this.barChartData = barResponse.data.data; // 假设返回的数据是数组
      //初始化图表
      this.initCharts();

    },
    initCharts() {
      if ((this.lineChartData.category.length + this.lineChartData.rate.length)> 0) {
        this.initLineChart(this.lineChartData);
      }
      if (this.pieChartData.length> 0) {
        this.initPieChart(this.pieChartData);
      }
      if (this.barChartData.length> 0) {
        this.initBarChart(this.barChartData);
      }
    },
    initLineChart(lineChartData) {
      const lineChart = echarts.init(this.$refs.lineChart);
      const lineOption = {
        title: {
          text: '当班各产线整车',
          left: '55%', // 定位到适合的位置
          top: 'top', // 定位到适合的位置
          textAlign: 'center', // 主、副标题水平居中显示
          textStyle: {
            fontSize: '24px', // 设置较大的字体大小，类似于H2标签
            fontWeight: 'normal', // 字体加粗
            color: '#000', // 深色文本，通常是黑色
            fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif' // 常用的字体系列
          } },
        tooltip: {
          trigger: 'axis', // 触发类型为 axis
          axisPointer: { // 鼠标悬停效果
            type: 'shadow', // 指示器类型为 line
            shadowStyle: { // 指示器的样式
              color: 'rgba(0,0,0,0.1)', // 可以设置为透明，使其不影响图表
            }
          },
          formatter: function(params) {
            // 格式化 tooltip 显示的内容
            var res = params[0].name+'<br/>'; // X 轴的名称
            res += ' : ' + params[0].value;
            return res;
          },
          rich: {
            value: {
              fontSize: '1rem'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: lineChartData.category // 假设数据对象有 x 属性表示 xAxis 数据
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'line',
          data: lineChartData.rate // 假设数据对象有 y 属性表示 series 数据
        }]
      };
      lineChart.setOption(lineOption);
      this.$set(this, 'lineChart', lineChart);
    },
    initPieChart(pieChartData) {
      const pieChart = echarts.init(this.$refs.pieChart);
      const total=pieChartData.reduce((accumulator, item) => {
        return accumulator + item.value;
      }, 0);
      const pieOption = {
        title: {
          text: '车辆总数',
          left: '50%', // 定位到适合的位置
          top: '45%', // 定位到适合的位置
          subtext:total.toString(), // 副标题
          subtextStyle: { // 副标题样式
            color: 'red',
            fontSize: 13,
            fontWeight: 'bold'
          },
          textAlign: 'center' // 主、副标题水平居中显示
        },

        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          data: pieChartData.map(item => ({
            name: item.name+item.value, // 假设数据对象有 name 属性表示数据名称
            value: item.value// 假设数据对象有 value 属性表示数据值
          })),
          label: {
            padding: [0, -50],
          },
          labelLine: {
            length: 20,
            length2: 50,
          },
          labelLayout: {
            verticalAlign: "bottom",
            dy: -3,
          },
        }]
      };
      window.onresize = function () {
        pieChart.resize()
      };
      pieChart.setOption(pieOption);
      this.$set(this, 'pieChart', pieChart);
    },

    initBarChart(barChartData) {
      const barChart = echarts.init(this.$refs.barChart);
      const xAxisData = this.pieChartData.map(item => item.name);
      const barOption = {
        title: {
          text: '当班各工位合格率',
          left: '40%', // 定位到适合的位置
          top: 'top', // 定位到适合的位置
          textAlign: 'center', // 主、副标题水平居中显示
          textStyle: {
            fontSize: '24px', // 设置较大的字体大小，类似于H2标签
            fontWeight: 'normal', // 字体加粗
            color: '#000', // 深色文本，通常是黑色
            fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif' // 常用的字体系列
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //柱形图和折线图相互切换
        toolbox: {
          show : true,
          feature : {
            /* line是折线图，bar是柱形图*/
            magicType: {show: true, type: ['line', 'bar']},
          }
        },
        calculable : false,//图形固定不能移动
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data:xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: barChartData[0].车间,
            type: 'bar',
            data: barChartData[0].rate
          },
          {
            name: barChartData[1].车间,
            type: 'bar',
            data: barChartData[1].rate
          },
          {
            name: barChartData[2].车间,
            type: 'bar',
            data: barChartData[2].rate
          },
          {
            name: barChartData[3].车间,
            type: 'bar',
            data: barChartData[3].rate
          },
          {
            name: barChartData[4].车间,
            type: 'bar',
            data: barChartData[4].rate
          },
          {
            name: barChartData[5].车间,
            type: 'bar',
            data: barChartData[5].rate
          },
          {
            name: barChartData[6].车间,
            type: 'bar',
            data: barChartData[6].rate
          },
          {
            name: barChartData[7].车间,
            type: 'bar',
            data: barChartData[7].rate
          },
          {
            name: barChartData[8].车间,
            type: 'bar',
            data: barChartData[8].rate
          }
        ]
      };
      barChart.setOption(barOption);
      this.$set(this, 'barChart', barChart);
    },
    handleResize() {
      this.$nextTick(() => {
        if (this.lineChart) this.lineChart.resize();
        if (this.pieChart) this.pieChart.resize();
        if (this.barChart) this.barChart.resize();
      });
    },
  }
};
</script>

<style scoped>
/* 您的样式 */
.app-container.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
</style>
